<template>
  <div>
    <!--<sticky-->
    <!--ref="sticky"-->
    <!--scroll-box="vux_view_box_body"-->
    <!--:offset="46"-->
    <!--:check-sticky-support="false"-->
    <!--:disabled="disabled"-->
    <!--&gt;-->
    <van-tabs
      :scroll-threshold="items.length"
      :line-width="4"
    >
      <template v-for="(item, index) in items">
        <p :key="index">
          <template v-if="item.badge">
            <van-tab
              :badge-label="item.badge+''"
              :selected="$route.params.domain===JSON.stringify(item.domain)"
              @on-item-click="ClickButtonTableItem(item)"
            >
              {{ item.title }}
            </van-tab>
          </template>
          <template v-else>
            <van-tab
              :selected="$route.params.domain===JSON.stringify(item.domain)"
              @on-item-click="ClickButtonTableItem(item)"
            >
              {{ item.title }}
            </van-tab>
          </template>
        </p>
      </template>
    </van-tabs>
    <!--</sticky>-->
    <div
      v-for="view in allViews"
      :key="view"
    >
      <p>
        <component
          :is="view"
          :model.sync="model"
          :domain.sync="domain"
          :offset_step.sync="offset"
          :order="order"
          :limit.sync="limit"
          :context="context"
          @on-click-item="treeRowClick"
        />
      </p>
    </div>
    <div
      class="floating-button"
      @click="AddNewRecord()"
    >
      <i class="icon icon-plus" />
    </div>
  </div>
</template>

<script>
  import Tree from './Tree.vue'
  import Card from './Card.vue'
  import {mapState} from 'vuex'
  import {table} from '../api/http'

  export default {
  name: 'Views',
  components: {
    Tree,
    Card,
    // Sticky,
  },
  data: function () {
    return {
      disabled: false,
      curentComponent: '',
      domain: [],
      // viewId: '',
      context: {},
      allViews: ['Tree', 'Card'],
      model: '',
      noForm: '',
      order: '',
      offset: 0,
      limit: 20,
      items: []
    }
  },
  computed: {
    ...mapState({
      route: state => state.route,
      path: state => state.route.path,
      isLoading: state => state.app_root.isLoading,
      app_root: state => state.app_root
    })
  },
  watch: {
    '$route': function (to, from) {
      if (this.$route.params.domain) {
        this.domain = JSON.parse(this.$route.params.domain)
      }
    }
  },
    mounted: function () {
    let self = this
    self.app_root.tabbarShow = false
    self.app_root.showBackHeader = true
    self.$nextTick(() => {
      self.getAllData()
    })
  },
  methods: {
    ClickButtonTableItem: function (item) {
      let self = this
      let j = ''
      if (item) {
        j = JSON.stringify(item.domain)
      }
      self.getAllData()
      self.$router.push({ path: '/odoo/view/' + self.$route.params.actionId + '/' + j })
    },
    AddNewRecord: function () {
      let self = this
      self.$router.push({
        name: 'NewForm',
        params: {
          id: 0,
          context: self.context,
          model: self.model
          // viewId: self.viewId
        }
      })
    },
    treeRowClick: function (item) {
      let self = this
      if (!self.noForm && self.curentComponent !== 'OdooCard') {
        self.$router.push({
          path: '/form/',
          query: { recordId: item.value, model: self.model }
        })
      }
    },
    getAllData: function () {
      let self = this
      table(self.$route.params.model, { fields: 'name,id', lang: self.app_root.lang }).then(function (response) {
        self.items = response
        // self.viewId = response.data.viewId
        // self.offset = response.data.offset
        // self.limit = response.data.limit
        // self.order = response.data.order
        // self.context = response.data.context
        // self.noForm = response.data.noForm
        // self.model = response.data.model
        // self.curentComponent = response.data.view_type
        if (!self.$route.params.domain && self.items) {
          // self.ClickButtonTableItem(self.items[0])
        } else {
          self.domain = JSON.parse(self.$route.params.domain)
        }
      })
    }
  }

}
</script>

<style>
  .divcss6_right {
    margin-top: 100%;
    position: absolute;
    margin-left: 85%;
  }

  .floating-button {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    z-index: 1500;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
    background-color: #2196f3;
    color: #fff;
    overflow: hidden;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center
  }

  .floating-button.active-state, html:not(.watch-active-state) .floating-button:active {
    background: #0c82df
  }

  .floating-button-toolbar, .speed-dial {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 1500
  }

  .floating-button-toolbar .floating-button, .speed-dial .floating-button {
    right: 0;
    bottom: 0;
    position: relative
  }

  i.icon.icon-plus {
    width: 24px;
    height: 24px;
    font-size: 0;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D'%23FFFFFF'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20width%3D'24'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M19%2013h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'%2F%3E%3Cpath%20d%3D'M0%200h24v24H0z'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E")
  }

</style>
